
<script setup>
	import { ref} from 'vue'
const title={
	Text1:'Hi Shasha',
	Text2:"Good Moming!"
}
const catInfo = ref({
	name:'火火',
	sex:'母',
	survive:'6个月',
	body:'5kg',
	character:[
		'活泼',
		'可爱',
		'粘人'
	]
		
	
})



</script>

<template>
	<view class="content">
		<Heart :title="title" />
		<view class="index">
			<view class="heat">
				
			</view>
		<view v-if="catInfo.name">
			<image src="../../static/index/HOt.png" mode=""></image>
			<view class="Info_cat">
				<view class="name">
					<text>{{catInfo.name}}</text>
				<uni-icons custom-prefix="iconfont" color="#ff9f80" :type="catInfo.sex ==='母'? 'icon-nvsheng':'icon-nansheng'"  size="20" style="margin-left: 40rpx; transform:rotate(30deg);"></uni-icons>
				</view>
				<view class="kg">
					<text>{{catInfo.survive}}</text> |
					<text>{{catInfo.body}}</text>
				</view>
				<view class="love">
					<text  v-for="item in catInfo.character" :key="item">{{item}}</text>
				
				</view>
				
					
			</view>
			<view class="set_Info">
				<uni-icons type="compose" color="#fff"></uni-icons>
			</view>
		</view>
			<view v-else class="insetcat">
				<view style="display: flex; position: absolute;top: 50%;left: 50%; transform: translateX(-50%);">
					<view class="addicon">
						<image style="width: 100%; height: 100%;"  src="../../static/index/addimg.png" mode="aspectFill"></image>
					</view>
					<text style="margin-left: 15rpx;font-weight: 700;font-size: 36rpx;">添加我的宠物</text>
			
				</view>
			<image class="insetimg" src="../../static/index/add.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="usesent">
		
				<ul  class="letf-Info">
					<image class="po-img"  src="../../static/index/云.png" mode="aspectFill"></image>
					<li class="li"><uni-icons style="margin-right: 5rpx;" size="10" type="smallcircle-filled" color="#000"> </uni-icons> 给火火打疫苗</li>
					<li class="li"><uni-icons style="margin-right: 5rpx;" size="10" type="smallcircle-filled" color="#000"></uni-icons> 清理猫砂</li>
					<li class="li"><uni-icons style="margin-right: 5rpx;" size="10" type="smallcircle-filled" color="#000"></uni-icons> 购买火火吃的小零食</li>
					<li class="li"><uni-icons style="margin-right: 5rpx;" size="10" type="smallcircle-filled" color="#000"></uni-icons> 给火火清理耳朵</li>
					<li class="li"><uni-icons style="margin-right: 5rpx;" size="10" type="smallcircle-filled" color="#000"></uni-icons> 给火火剪指甲</li>
				</ul>
			
			<view class="right">
				<view class="top">
					<view class="left-info">
						<h4 class="h4">记录</h4>
						<text>更好的照顾小宠</text>
					</view>
					<view class="image">
						<image style="width: 100%; height: 100%; " src="../../static/index/记录.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="left-info">
						<h4 class="h4">提醒</h4>
						<text>防止忘记</text>
					</view>
					<view class="image">
						<image style="width: 100%; height: 100%;" src="../../static/index/提醒.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
<view class="explain">
	<view class="heart">
	<view class="yell">
		
	</view>
		<text class="kepu">今日科普

		</text>
		<text class="kepuInfo">【长出蒜瓣毛】</text>
	</view>
	<view class="Info">
		<view class="Info-text">
			<image  class="info-img" src="../../static/index/kepu.png" mode="aspectFill"></image>
<text style="position: absolute;">
	当你看到自己猫的毛发分层了，那是它的蒜瓣毛~猫咪有蒜瓣毛说明它营养充足，毛发密集，说明平时吃的很好很有营养，是被养的
	很好的表现哦～
</text>
<view class="bottom-yu">
		<image class="letbot" src="../../static/index/鱼骨头.png" mode=""></image>
</view>
      </view>
	</view>
</view>
	</view>
</template>


<style lang="scss" scoped>
	.Info{
		padding: 20rpx;
		margin-top: 10rpx;
		
		.Info-text{
			font-size: 24rpx;
			width: 100%;
			height: 100%;
			.bottom-yu{
				position: absolute;
				width: 164rpx;
				height: 20rpx;
				bottom: 30rpx;
				left: 20rpx;
				.letbot{
					width: 100%;
					height: 100%;
				}
			}
			
		}
	
	}
	.info-img{
		position: absolute;
		float: right;
		width: 316rpx;
		height: 270rpx;
	bottom: -10rpx;
		right: -50rpx;
	opacity: 0.9;
	}
	.explain{
		position: relative;
		width: 690rpx;
		height: 440rpx;
		border: 2px solid black;
		margin: 50rpx auto;
		border-radius: 40rpx;
		background-color: white;
		.heart{
			position: relative;
			margin-top: 30rpx;
			margin-left: 20rpx;
				
			text{
				
			display: inline-block;
				font-weight: 700;
			
			
			}
			.kepu{
				font-size: 36rpx;
				
					  background: linear-gradient(to top, #feea3a 45%, #fffce0 30%); 
			}
			.kepuInfo{
				font-size: 24rpx;
				margin-left: 40rpx;
				
			}
		
		}
	}
	.po-img{
		width: 106rpx; 
		height: 72rpx;
		position: absolute;
		bottom: -20rpx;
		right: -15rpx;
	}
.index{
	position: relative;
	margin-top: 40rpx;
	width: 676rpx;
	height: 300rpx;
	border: 2px solid black;
	margin-left: 50%;
	transform: translateX(-50%);
	border-radius: 40rpx;
	background-color: #fff;
	
	.insetcat{
		
		width: 624rpx;
		height: 288rpx;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		
		.insetimg{
			width: 100%; height: 100%; 
			position: absolute;
			top: 0;
			left: 0;
		}
		.addicon{
			width: 48rpx;
			height: 52rpx;
		}
	}
	.heat{
		width: 120rpx;
		height: 20rpx;
		background-color: #fff4c2;
		transform: translateX(-50%);
		margin-left: 50%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 15rpx;
		border: 2px solid black;
	}
	image{
		width: 252rpx;
		height: 252rpx;
		float: left;
	}
	.set_Info{
		position: absolute;
		width: 100rpx;
		height: 56rpx;
		background-color:#000;
		top: 20rpx;
		right: 20rpx;
		text-align: center;
		border-radius: 40rpx;
	}
}
.Info_cat{
	float: left;
	margin-top: 30rpx;
	margin-left: 30rpx;
	
	.name{
		display: flex;
		font-size: 38rpx;
		text{
			font-weight: 700;
		}
	}
	.kg{
		margin-top: 10rpx;
		font-size: 38rpx;
		font-weight: 700;
	}
	.love{
		margin-top: 20rpx;
		text{
			font-size: 30rpx;
			background-color:#ffe68c ;
			padding: 5rpx 20rpx;
			margin-left: 15rpx;
			border-radius: 20rpx;
			line-height: 40rpx;
			font-weight: 700;
			
		}
	}
}

.usesent{
	display: flex;
	width: 720rpx;
	justify-content: space-around;
	margin: auto;
	margin-top: 60rpx;
	.letf-Info{
		
		position: relative;
		float: left;
		width: 328rpx;
		height: 378rpx;
		border: 2px solid black;
		border-radius: 30rpx;
		font-size: 30rpx;
		background-color: #fff;
	list-style-type: disc;
		.li{
			margin-top: 25rpx;
			margin-left: 10rpx;
			width: 320rpx;
			  white-space: nowrap;   
			            overflow: hidden; 
			            text-overflow: ellipsis; 
		    }  
		    
		
	}
	.right{
		display: flex;
		flex-direction: column;
		justify-content:space-around;
	
		.top,.bottom{
			background-color: white;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 328rpx;
			height: 176rpx;
			border: 2px solid black;
			border-radius: 40rpx;
			.h4{
				font-size: 32rpx;
				font-weight: 600;
			
			}
			text{
				font-size: 20rpx;
			}
		}
	}
}
.image{
	width: 92rpx;
	height: 120rpx;
}

</style>
